<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>
<html lang="en">
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="UTF-8">
    <title>四川工商学院失物招领系统</title>
    <%@include file="../common/commHeader.html"%>
</head>
<body style="background:#EEEEEE;">
<%@include file="header.jsp"%>
    <!--主题内容-->
    <div class="col-md-10 col-md-offset-1">
        <!--头部-->
        <div class="col-md-12">
            <div class="col-md-10 col-md-offset-2 laf-publish-lost">
                <form action="notice/save" onsubmit="return onSubmit()" method="post" class="form-horizontal" role="form">
                    <input type="hidden" name="type" value="1">
                    <input type="hidden" name="noticeId" value="${notice.noticeId}">
                    <input type="hidden" name="update" value="${update}">
                    <div class="form-group">
                        <label class="col-md-2 control-label">发布类别</label>
                        <div class="col-md-6">
                            <img src="image/select-zhao.png" height="70px" alt="">
                            &gt;&gt; <a href="laf/showPublish">选错了？重新选择！</a>
                        </div>
                        <label class="col-md-2"><b>*</b>为必填项</label>
                    </div>
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label"><b>*</b>启事标题</label>
                        <div class="col-sm-6">
                            <input type="text" value="${notice.title}" class="form-control" id="title" placeholder="请输入启事标题" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cateId" class="col-sm-2 control-label"><b>*</b>失物类别</label>
                        <div class="col-sm-6">
                            <select class="form-control" name="cateId" id="cateId" required>
                                <c:forEach var="item" items="${cateList}">
                                    <option  value="${item.cateId}" <c:if test="${item.cateId eq notice.cateId}" >selected</c:if> >${item.cateName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="noticeTime" class="col-sm-2 control-label"><b>*</b>拾取时间</label>
                        <div class="col-sm-6">
                            <input type="date" class="form-control" id="noticeTime" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="scopeId" class="col-sm-2 control-label"><b>*</b>拾取范围</label>
                        <div class="col-sm-6">
                            <select class="form-control" name="scopeId" id="scopeId" required>
                                <c:forEach var="item" items="${scopeList}">
                                    <option  value="${item.scopeId}" <c:if test="${item.scopeId eq notice.cateId}" >selected</c:if> >${item.locName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="location" class="col-sm-2 control-label"><b>*</b>具体地点</label>
                        <div class="col-sm-6">
                            <input type="text" value="${notice.location}" class="form-control" id="location" name="location" required placeholder="请输入具体地点">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="myimage1" class="col-sm-2 control-label">描述图片</label>
                        <div class="col-sm-6"><!--图片上传-->
                            <div class="hcjFileUpload" id="myimage1">
                                <c:choose>
                                    <c:when test="${notice.image1 != null and fn:length(fn:trim(notice.image1))>0}">
                                        <input type="file" class="select-upload-file1">
                                        <input type="hidden" name="image1"  id="image1" value="${notice.image1}">
                                        <img class="img-responsive" src="image/upload/${notice.image1}" />
                                    </c:when>
                                    <c:otherwise>
                                        <i class="glyphicon glyphicon-plus"></i>
                                        <input type="file" class="select-upload-file1">
                                        <input type="hidden" name="image1"  id="image1">
                                    </c:otherwise>
                                </c:choose>
                            </div>
                            <div class="hcjFileUpload" id="myimage2">
                                <c:choose>
                                    <c:when test="${notice.image2 != null and fn:length(fn:trim(notice.image2))>0}">
                                        <input type="file" class="select-upload-file2">
                                        <input type="hidden" name="image2"  id="image2" value="${notice.image2}">
                                        <img class="img-responsive" src="image/upload/${notice.image2}" />
                                    </c:when>
                                    <c:otherwise>
                                        <i class="glyphicon glyphicon-plus"></i>
                                        <input type="file" class="select-upload-file2">
                                        <input type="hidden" name="image2"  id="image2">
                                    </c:otherwise>
                                </c:choose>
                            </div>
                            <div class="hcjFileUpload" id="myimage3">
                                <c:choose>
                                    <c:when test="${notice.image3 != null and fn:length(fn:trim(notice.image3))>0}">
                                        <input type="file" class="select-upload-file3">
                                        <input type="hidden" name="image3"  id="image3" value="${notice.image3}">
                                        <img class="img-responsive" src="image/upload/${notice.image3}" />
                                    </c:when>
                                    <c:otherwise>
                                        <i class="glyphicon glyphicon-plus"></i>
                                        <input type="file" class="select-upload-file3">
                                        <input type="hidden" name="image3"  id="image3">
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="describe" class="col-sm-2 control-label">详细描述</label>
                        <div class="col-sm-6">
                            <textarea class="form-control" name="describe" id="describe" rows="5" placeholder="请输入详细描述">${notice.describe}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="linkMan" class="col-sm-2 control-label"><b>*</b>联系人</label>
                        <div class="col-sm-6">
                            <input type="text" value="${notice.linkMan}" class="form-control" id="linkMan" required name="linkMan" placeholder="请输入联系人姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="col-sm-2 control-label"><b>*</b>联系电话</label>
                        <div class="col-sm-6">
                            <input type="text" value="${notice.phone}" class="form-control" id="phone" required name="phone" placeholder="请输入联系人电话电话">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="QQ" class="col-sm-2 control-label">联系人QQ</label>
                        <div class="col-sm-6">
                            <input type="text" value="${notice.qq}" class="form-control" id="QQ" name="QQ" placeholder="请输入联系人QQ号码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-6">
                            <input type="email" value="${notice.email}" class="form-control" pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" id="email" name="email" placeholder="请输入邮箱号码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label"><b>*</b>验证码</label>
                        <div class="col-sm-6">
                            <div class="col-sm-3" style="margin-left: -3.4%">
                                <input type="text" name="code" id="code" class="form-control" pattern="\w{4}" required>
                            </div>
                            <img class="img-responsive" id="codeImage" src="laf/code" title="看不清楚？换一张" alt="验证码" style="cursor:pointer;height: 30px;margin-top: .2%">
                            <c:if test="${param.status == 'error'}">
                                <span class="laf-tooltiptext"  style="visibility: visible;opacity: .9;margin-top:-6%;margin-left: -47%"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>验证码输入错误，请重新输入！</span>
                            </c:if>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-8">
                            <button type="submit" class="btn btn-info">发布</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>


    // 更换验证码
    <%--function changeCode(){--%>
        <%--document.getElementById("vcode").src="laf/code?r="+new Date().getTime();--%>
        <%--$('#hidCode').val('${vcode}');--%>

    <%--}--%>
    
    function run(input_file, get_data){
        /*input_file：文件按钮对象*/
        /*get_data: 转换成功后执行的方法*/
        if ( typeof(FileReader) === 'undefined' ){
            alert("抱歉，你的浏览器不支持FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
        } else {
            try{
                /*图片转Base64 核心代码*/
                var file = input_file.files[0];
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                if(!/image\/\w+/.test(file.type)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function(){
                    get_data(this.result);
                }
                reader.readAsDataURL(file);
            }catch (e){
                alert('图片转Base64出错啦！'+ e.toString())
            }
        }
    }
    $(function () {
        $('#codeImage').click(function () {
            var urlPath='laf/code?r='+new Date().getTime();
            document.getElementById("codeImage").src=urlPath;
        });

        // 将拾取时间设置为当前日期
        var today=new Date();
        var toDay=today.getFullYear()+'-'+((today.getMonth()+1)>=10?(today.getMonth()+1):('0'+(today.getMonth()+1)))+'-'+(today.getDate()>=10?today.getDate():('0'+today.getDate()));
        if($('#noticeTime').val().length<2) {
            $('#noticeTime').val(toDay);
        }

        $(".select-upload-file1").change(function () {
            var fa=$(this).parent();
            run(this, function (data) {
                fa.find('i').remove();
                fa.find("img").remove();
                fa.append("<img class='img-responsive' src='"+data+"' />");
                $('#image1').val(data)  //base64图片字符串
            });
        });
        $(".select-upload-file2").change(function () {
            var fa=$(this).parent();
            run(this, function (data) {
                fa.find('i').remove();
                fa.find("img").remove();
                fa.append("<img class='img-responsive' src='"+data+"' />");
                $('#image2').val(data)  //base64图片字符串
            });
        });
        $(".select-upload-file3").change(function () {
            var fa=$(this).parent();
            run(this, function (data) {
                fa.find('i').remove();
                fa.find("img").remove();
                fa.append("<img class='img-responsive' src='"+data+"' />");
                $('#image3').val(data)  //base64图片字符串
            });
        });
    });
</script>
</body>
</html>